<template>
	<!-- form表单 -->
	<view class="flowLaunch-v">

		<u-toast ref="uToast"></u-toast><!-- 弹窗 -->

		<view style="background-color: white;margin: 10px;border-radius: 10px;">

			<u-form :model="data" ref="uForm">

				<u-form-item class="text-input" label-width="150" label="编号 :"><u-input type="text" v-model="data.Code"
						disabled="disabled" placeholder="" /></u-form-item>
				<u-form-item class="text-input" label-width="150" label="检验批 :"><u-input v-model="data.InspectionLot"
						disabled="disabled" placeholder="" /></u-form-item>
				<u-form-item class="text-input" label-width="150" label="批次 :"><u-input v-model="data.BatchNumber"
						disabled="disabled" placeholder="" /></u-form-item>
				<u-form-item class="text-input" label-width="150" label="物料编码 :"><u-input v-model="data.MaterialCode"
						disabled="disabled" placeholder="" /></u-form-item>
				<u-form-item class="text-input" label-width="150" label="物料描述 :"><u-input v-model="data.MaterialDes"
						disabled="disabled" placeholder="" /></u-form-item>
				<u-form-item class="text-input" label-width="150" label="供应商 :"><u-input v-model="data.SupplierDes"
						disabled="disabled" placeholder="" /></u-form-item>
				<u-form-item class="text-input" label-width="150" label="问题原因 :">

					<u-radio-group v-model="data.ProblemName">
						<u-radio v-for="(item, index) in radioList" :key="index" :name="item.name"
							:disabled="item.disabled" disabled>
							{{ item.name }}
						</u-radio>
					</u-radio-group>

				</u-form-item>

				<u-form-item class="text-input" label="处理决策:" prop="Decision" label-width="150" onscroll="handleScroll"
					required>
					<shzy-select v-model="data.Decision" placeholder="请选择处理决策" :options="decisionList"
						:props="{label:'fullName',value:'enCode'}" style="padding-right: 20px;"></shzy-select>
				</u-form-item>
			</u-form>


		</view>

		<view class="flow-list" v-if="DetailList.length > 0">
			<view class="flow-list-box">
				<uni-swipe-action ref="swipeAction">
					<uni-swipe-action-item v-for="(item, index) in DetailList" :key="item.id" :threshold="0"
						class="data-item">
						<view class="item" style="height: 140px;">
							<view class="item-left">

								<text class="title u-line-1 u-font-28">不良项目 :<text
										class="titInner">{{item.innspectionName ? item.innspectionName : ''}}</text></text>
								<text class="title u-line-1 u-font-28">抽样数 :<text
										class="titInner">{{item.samplingQty ? item.samplingQty : '0'}}</text>
								</text>
								<text class="title u-line-1 u-font-28">不良数 :<text
										class="titInner">{{item.defectQty ? item.defectQty : '0'}}</text>
								</text>
								<text class="title u-line-1 u-font-28">不良率 :<text
										class="titInner">{{item.defectRate ? item.defectRate : '0'}}</text></text>

							</view>

							<view class="item-right">
								<u-tag @click="show = true;stepsList=item.itemDefectList"
									v-show="item.itemDefectList.length > 0" text="缺" mode="light" type="error" />
							</view>

						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
		</view>

		<view>
			<u-popup v-model="show" mode="center" width="100%" height="400px"
				style="margin-left: 10px; margin-right: 10px;" closeable>
				<shzy-steps :list="stepsList" useSlot style="padding-top: 40px;">
					<template v-slot:default="{data}">
						<view class="flex-center">
							<u-tag :text="data.defectName"></u-tag> <u-tag :text="data.defectQty"
								style="margin-left:5px;"></u-tag>
						</view>
						<text>{{data.remark}}</text>
						<shzy-file v-model="data.fileInfo" showButton disabled/>

					</template>
				</shzy-steps>
			</u-popup>

		</view>


		<view class="buttom-actions">
			<u-button class="buttom-btn" @click.stop="open('press')" type="warning">转审</u-button>
			<u-button class="buttom-btn" @click.stop="open('save')" type="primary">通过</u-button>
			<u-button class="buttom-btn" @click.stop="open('reject')" type="error">拒绝</u-button>
		</view>

	</view>
</template>

<script>
	import resources from '@/libs/resources.js'
	import upopup from '@/uview-ui/components/u-popup/u-popup.vue'
	import {
		getFlowBeforeForm
	} from '@/api/q1/workFlow/Engine/engine.js'
	import {
		getDictionaryDataSelector
	} from '@/api/common.js'
	export default {

		props: {

			engineId: { // id
				type: String,
				default: ''
			},
			encode: {
				type: String,
				default: ''
			},
			flowId: {
				type: String,
				default:''
			}
		},
		data() {
			return {
				showdialog: false,
				content: '',
				show: false,
				form: {
					sn: '',
					batch: ""
				},
				data: {},
				stepsList: [],
				inspection: [],
				DetailList: [],
				id: '',
				code: '',
				message: '',
				radioList: [{
						name: '供应商问题',
						disabled: false
					},
					{
						name: '非供应商问题',
						disabled: false
					}
				],
				radio: '',
				// 物料数
				decisionList: [], // 使用决策列表
				submittype: '',
				status: '',
				type: '',

			}
		},

		mounted() {
			this.getSelect("455657197360142085"); // 不合格决策
			this.init();
		},
		methods: {
			init() {
				
				getFlowBeforeForm(this.engineId).then(res => {
					if (res.code == 200) {
				
						this.data = res.data;
						this.$set(this.data, 'ProblemName', this.data.Problem == '1' ? '供应商问题' : '非供应商问题');
						this.inspection = this.data.inspection;
						this.DetailList = this.data.DetailList;
					}
				}).catch((err) => {
					this.$refs.uToast.show({
						title: '异常:' + err,
						type: 'error'
					})
				});

			},
			// 字典项数据
			getSelect(dictionaryTypeId) {

				getDictionaryDataSelector(dictionaryTypeId).then(res => {

					if (res.code == 200) {

						const list = res.data.list.map(item => {
							return {
								...item,
								id: item.enCode, // 字典项配置的编号
								label: item.fullName // 要显示的数据	
							}
						})

						if (dictionaryTypeId == '455657197360142085') this.decisionList = list; // 不合格决策

					}

				}).catch((err) => {
					this.$refs.uToast.show({
						title: '异常:' + err,
						type: 'error'
					})
				});
			},
			//打开弹框【转审press、通过save、拒绝reject】
			open(type) {
				
				let params = JSON.stringify({
					id: this.engineId,
					encode: this.encode,
					type: type,
					data: this.data,
					flowId: this.flowId,
				})
				console.log(type)
				if (type == 'save' || type == 'reject') {
					
					uni.navigateTo({
						url: '/pages/q1/workFlow/Engine/EngineSub?params=' + params
					})


				} else {
					uni.navigateTo({
						url: '/pages/q1/workFlow/Engine/EngineEmployee?params=' + params
					})
				}

			},
		}
	}
</script>

<style lang="css">
	page {
		background-color: #f0f2f6;
	}

	.text-input {
		padding-left: 20rpx;
	}

	.flowLaunch-v {
		width: 100%;

		.flow-list {
			padding-bottom: 44px;
		}

		.flow-list-box {
			width: 95%;

			.item {

				margin: 20rpx 20rpx 20rpx 0;
			}

			.item-left-top {
				// 给图标右对齐
				width: 100%;
				text-align: right;

				.common-lable {
					font-size: 24rpx;
					padding: 2rpx 8rpx;
					margin-right: 8rpx;
					border-radius: 8rpx;
					color: #ffffff;
					border: 1px solid #ffffff;
					background-color: #6dcc51;
				}

				.urgent-lable {
					color: #E6A23C;
					border: 1px solid #E6A23C;
					background-color: #fef6e5;
				}

				.important-lable {
					color: #F56C6C;
					border: 1px solid #F56C6C;
					background-color: #fee5e5;
				}

				.title {
					width: unset;
					flex: 1;
					min-width: 0;
				}
			}
		}
	}
</style>